<template>
  <div class="table1">
    <div class="btn-wrap">
      <a-button type="primary" style="margin-right: 15px;" @click="onEdit()">添加</a-button>
      <a-button type="info" @click="download">导出</a-button>
    </div>
    <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading" :columns="columns"
      :dataSource="pageData" @selectedRow="onSelectedRow" @change="onTableChange">
      <!--操作-->
      <template slot="status" slot-scope="text, record">
        <span style="color: primary;" v-if="text == 1">待审批</span>
        <span style="color: green;" v-if="text == 2">已完成</span>
        <span style="color: red;" v-if="text == 3">已驳回</span>
        <span style="color: #bbb;" v-if="text == 4">已撤销</span>
      </template>
      <template slot="action" slot-scope="text, record">
        <a-button @click="onDetail(record)" type="link" style="padding:0;">查看</a-button>

        <a-button @click="onEdit(record)" type="link" style="padding:0;margin-left: 10px;">编辑</a-button>
      </template>
    </z-table>
    <a-modal width="900px" :title="addFormTitle" :visible="addFormVisible" @ok="onAddSubmit" @cancel="onAddFormCancel">
      <a-form-model ref="addForm" :model="addForm" :label-col="{span: 6}" :wrapper-col="{span: 18}">
        <a-row>
          <a-col :span="6">
            <div class="required">出席情况：</div>
          </a-col>
          <a-col :span="18">
            <table class="form-table" style="width: 100%" border="1">
              <thead>
                <tr>
                  <th>单元（节）数</th>
                  <th v-for="(item, index) in addForm.attendance">{{index + 1}}</th>
                  <th>平均值</th>
                </tr>
              </thead>
              <tbody>
                <tr>
                  
                  <td>出席人数</td>
                  <!-- countAttend -->
                  <td v-for="(item, index) in addForm.attendance" :key="index">
                    <a-form-model-item :props="`attendance.${index}.countAttend`" :rules="{required: true, message: '请输入人数', trigger: ['blur']}">
                      <a-input-number v-model="addForm.attendance[index].countAttend" style="width: 100%;margin-top: 25px;" :min="0" />
                    </a-form-model-item>
                  </td>
                  <td>
                    {{computedCountAttend}}
                  </td>
                </tr>
                <tr>
                  
                  <td>出勤率</td>
                  <td v-for="(item, index) in addForm.attendance" :key="index">
                    <a-form-model-item :props="`attendance.${index}.rateAttend`" :rules="{required: true, message: '请输入出勤率', trigger: ['blur']}">
                      <a-input-number v-model="addForm.attendance[index].rateAttend" style="width: 100%;margin-top: 25px;" :min="0" :max="100" />
                    </a-form-model-item>
                  </td>
                  <td>
                    {{computedRateAttend}}
                  </td>
                </tr>
              </tbody>
            </table>
          </a-col>
        </a-row>
          <a-form-model-item label="目标达成情况" prop="main.contentProgress" :rules="{required: true, message: '请输入目标达成情况', trigger: ['change']}">
            <a-textarea v-model="addForm.main.contentProgress" :auto-size="{ minRows: 6, maxRows: 10 }"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="参加者满意度分析" prop="main.contentSatisfactionAnalysis" :rules="{required: true, message: '请输入参加者满意度分析', trigger: ['change']}">
            <a-textarea v-model="addForm.main.contentSatisfactionAnalysis" :auto-size="{ minRows: 6, maxRows: 10 }"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="小组分析" prop="main.contentGroupAnalysis" :rules="{required: true, message: '请输入小组分析', trigger: ['change']}">
            <a-textarea v-model="addForm.main.contentGroupAnalysis" :auto-size="{ minRows: 3, maxRows: 10 }"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="其他建议" prop="main.contentOtherAdvice" :rules="{required: true, message: '请输入其他建议', trigger: ['change']}">
            <a-textarea v-model="addForm.main.contentOtherAdvice" :auto-size="{ minRows: 3, maxRows: 10 }"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="工作反思" prop="main.contentIntrospection" :rules="{required: true, message: '请输入工作反思', trigger: ['change']}">
            <a-textarea v-model="addForm.main.contentIntrospection" :auto-size="{ minRows: 6, maxRows: 10 }"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="跟进计划" prop="main.contentFollowPlan" :rules="{required: true, message: '请输入跟进计划', trigger: ['change']}">
            <a-textarea v-model="addForm.main.contentFollowPlan" :auto-size="{ minRows: 3, maxRows: 10 }"></a-textarea>
          </a-form-model-item>
          <a-form-model-item label="财务报告" prop="main.contentFinanceReport" :rules="{required: true, message: '请输入财务报告', trigger: ['change']}">
            <a-textarea v-model="addForm.main.contentFinanceReport" :auto-size="{ minRows: 3, maxRows: 10 }"></a-textarea>
          </a-form-model-item>
          
          <a-form-model-item prop="main.attachment" :rules="{required: true, message: '请上传附件', trigger: ['change']}">
            <template slot="label">
              <span>
                上传附件
                <a-tooltip placement="topLeft" title="请上传《经费决算明细表》">
                  <a-icon type="question-circle" />
                </a-tooltip>
              </span>
              
            </template>
            <span style="position: relative">
              <j-upload
                v-model="addForm.main.attachment"
              />
              <span>
                
                支持扩展名：.rar .zip .doc .docx .pdf .jpg...
              </span>
            </span>
            
          </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
  import { memberList } from '@/api/sjsk/activity/group/detail/mature/table1'
  import { getList, add, update, detail } from '@/api/sjsk/activity/group/detail/end/table8'
  import { unitList } from '@/api/sjsk/activity/common'
  import downloadXlsl from '../../downloadXlsx.js'
  export default {
    data() {
      return {
        loading:false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10
        },
        pageData: {},
        form: {},
        headerData: [],
        memberList: [],
        formColumns: [
          {
            title: '内容',
            dataIndex: 'itemName',
            align: 'left',
            customRender: text => {
              return <j-ellipsis value={text} length={50} />
            }
          },
          {
            title: '评价等级',
            width: 120,
            align: 'left',
            scopedSlots: { customRender: 'level' }
          }
        ],
        addFormTitle: '',
        addFormVisible: false,
        addForm: {
  "main": {
    "approvalStatus": '',
    "contentFinanceReport": "",
    "contentIntrospection": "",
    "updateTime": "",
    "contentProgress": "",
    "contentSatisfactionAnalysis": "",
    "contentFollowPlan": "",
    "contentOtherAdvice": "",
    "activityId": '',
    "createBy": "",
    "attachment": "",
    "createTime": "",
    "updateBy": "",
    "approvalId": '',
    "contentGroupAnalysis": "",
    
    "submitStatus": ''
  },
  "attendance": [
    
  ]
},
        columns: [{
            title: '提交人',
            dataIndex: 'memberName',
            width: 80,
            align: 'center',
            customRender: text => {
              return <j-ellipsis value={text} length={14} />
            }
          },
          
          {
              title: '提交情况',
              dataIndex: 'submitStatus',
              width: 80,
              align: 'center',
              customRender: text => {
                if(text) {
                  return <j-ellipsis value={text == 1 ? '未提交' : '已提交'} length={14} />
                } else {
                  return null
                }
                
              }
          },
          {
            title: '操作',
            width: 120,
            align: 'center',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        
        detail: {
          attendanceDetail: []
        }
      }
    },
    created() {
      
      this.onQuery()
    },
    computed: {
      computedCountAttend: function() {
        let total = 0
        this.addForm.attendance.map(item => {
          total += item.countAttend
        })
        if(total == 0) {
          return total
        }
        return parseInt(total / this.addForm.attendance.length)
      },
      computedRateAttend: function() {
        let total = 0
        this.addForm.attendance.map(item => {
          total += item.rateAttend
        })
        console.log(total)
        if(total == 0) {
          return total
        }
        return parseInt(total / this.addForm.attendance.length)
      },
    },
    methods: {
      download() {
        downloadXlsl(this.$route.query.id, 15)
      },
      getDetail() {
        const activityId = this.$route.query.id
        unitList({activityId}).then(res => {
          if(res.success) {
            
            this.addForm.attendance = res.result.map(item => {
              return {
                unitId: item.id,
                countAttend: 0,
                rateAttend: 0,
              }
            })
          }
        })
      },
      getUnitList() {
        detail({activityId}).then(res => {
          if(res.success) {
            this.detail = res.result
            this.addForm.attendance = res.result.attendanceDetail
          }
        })
      },
      onEdit(item) {
        this.getDetail()
        if(item) {
          this.addFormTitle = '编辑'
          this.addForm = item
        } else {
          this.addFormTitle = '添加'
          this.addForm.main.activityId = this.$route.query.id
        }
        this.addFormVisible = true
      },
      onAddSubmit() {
        const method = this.addFormTitle == '编辑' ? update : add
        this.$refs.addForm.validate().then(res => {
          method(this.addForm).then(res => {
            if(res.success) {
              this.$message.success(res.message)
              this.onAddFormCancel()
            } else {
              this.$message.error(res.message)
            }
          })
        })
      },
      onAddFormCancel() {
        this.addFormVisible = false
        this.addForm = {
  "main": {
    "approvalStatus": '',
    "contentFinanceReport": "",
    "contentIntrospection": "",
    "updateTime": "",
    "contentProgress": "",
    "contentSatisfactionAnalysis": "",
    "contentFollowPlan": "",
    "contentOtherAdvice": "",
    "activityId": '',
    "createBy": "",
    "attachment": "",
    "createTime": "",
    "updateBy": "",
    "approvalId": '',
    "contentGroupAnalysis": "",
    
    "submitStatus": ''
  },
  "attendance": [
    
  ]
}
      },
      getMemberList() {
        memberList({activityId: this.$route.query.id}).then(res => {
          if(res.success) {
            this.memberList = res.result.records
          }
        })
      },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = {
          currentPage: 'pageNo'
        }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      refreshTable() {
        let form = Object.assign({}, this.queryParam, this.pageFilter)
        form.activityId = this.$route.query.id
        this.loading = true
        getList(form).then((res) => {
            if (res.success) {
              this.pageData = res.result
              this.loading = false
              this.$refs.table.onClearRowKeys()
            } else {
              this.loading = false
            }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
    }
  }
</script>

<style lang="less" scoped>
  .table1 {
    box-sizing: border-box;
    padding: 20px 30px;
    .btn-wrap{
      margin-bottom: 20px;
    }
  }
  .form-table{
    margin-bottom: 15px;
    border-color: #eee;
    th{
      height: 53px;
      background-color: #f5f5f5;
      
    }
    th,td {
      padding-left: 8px;
    }
  }
  .required {
    text-align: right;
  
    &::before {
      content: '*';
      color: red;
      margin-right: 5px;
    }
  
  }
</style>
